<script setup>
const { proxy } = getCurrentInstance()
function getDom() {
  const options = {
    root: null, // 根元素，默认是视窗
    rootMargin: '0px', // 根元素的边距
    threshold: 0.1 // 当目标元素 50% 进入视窗时触发回调
  }

  const observer = new IntersectionObserver(callback, options)

  const targets = proxy.$refs.mainBox

  // 指定观察目标
  // 如果 targets 是一个数组，为每个元素设置观察器
  if (Array.isArray(targets)) {
    targets.forEach(target => {
      observer.observe(target)
    })
  } else {
    // 如果 targets 不是一个数组（可能是单个元素或未定义），则进行适当处理
    if (targets) {
      observer.observe(targets)
    } else {
      console.error('未找到目标元素')
    }
  }

  // 编写回调函数
  function callback(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 目标元素进入视窗
        countTimer && clearInterval(countTimer)
        // isShow.value = false
        setTimeout(() => {
          isShow.value = true
        }, 0)
      } else {
        // 目标元素离开视窗
        // isShow.value = false
        // countTimer && clearInterval(countTimer)
        setTimeout(() => {
          // isShow.value = true
        }, 0)
      }
    })
  }
}

const isShow = ref(false)
let count = 0
let countTimer = null
const currentTab = ref(1)
onMounted(() => {
  countTimer = setInterval(() => {
    count += 1
    if (count == 7) {
      isShow.value = false
    }
    if (count == 8) {
      isShow.value = true
      count = 0
    }
  }, 1000)
  getDom()
})
onUnmounted(() => {
  countTimer && clearInterval(countTimer)
})
</script>

<template>
  <section class="ym1000 flex flex-col justify-center items-center mt-100px">
    <div class="600 text-40px leading-56px mb-80px">指导思路</div>
    <div style="width: 1200px; height: 1300px; display: flex; justify-content: center; align-items: center" ref="mainBox">
      <div style="position: relative; width: 1200px; height: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap" v-if="isShow">
        <img src="/public/images/banner/solution/right-bottom.png" alt="" class="icon1 icon" />
        <img src="/public/images/banner/solution/left-bottom.png" alt="" class="icon2 icon" />
        <img src="/public/images/banner/solution/right-bottom.png" alt="" class="icon3 icon" />
        <img src="/public/images/banner/solution/left-bottom.png" alt="" class="icon4 icon" />
        <img src="/public/images/banner/solution/right-bottom.png" alt="" class="icon5 icon" />
        <div class="item1 item">
          <div class="tit">
            <div style="display: flex; align-items: center">
              <img src="/public/images/banner/solution/1.png" alt="" class="icon-img" />
              <span>规范管理流程</span>
            </div>
            <span class="count">01</span>
          </div>
          <div class="desc-box"><span style="color: #0a87f8">标准化操作：</span>制定统一的管理流程，减少人为操作失误，提高管理效率</div>
          <div class="desc-box"><span style="color: #0a87f8">流程自动化：</span>通过自动化工具处理日常事务，降低成本，提升管理透明度</div>
          <div class="desc-box"><span style="color: #0a87f8">实时监控与追踪：</span>随时掌握项目状态，确保各环节可追溯，提高政府监管能力</div>
        </div>
        <div class="item2 item">
          <div class="tit">
            <div style="display: flex; align-items: center">
              <img src="/public/images/banner/solution/2.png" alt="" class="icon-img" />
              <span>建立统一的信息标准</span>
            </div>
            <span class="count">02</span>
          </div>
          <div class="desc-box"><span style="color: #0a87f8">数据一致性：</span>统一标准，确保信息准确，打破信息孤岛，促进数据协同</div>
          <div class="desc-box"><span style="color: #0a87f8">编码规范化：</span>统一编码和数据格式，提高管理效率，支持决策分析</div>
          <div class="desc-box"><span style="color: #0a87f8">报表标准化：</span>生成标准化报表，确保数据可比性，为政策制定提供数据支持</div>
        </div>
        <div class="item3 item">
          <div class="tit">
            <div style="display: flex; align-items: center">
              <img src="/public/images/banner/solution/3.png" alt="" class="icon-img" />
              <span>提升管理效率与服务质量</span>
            </div>
            <span class="count">03</span>
          </div>
          <div class="desc-box"><span style="color: #0a87f8">快速响应机制：</span>在线处理投诉和问题，及时解决住户需求，提升服务质量</div>
          <div class="desc-box"><span style="color: #0a87f8">精细化管理：</span>优化资源配置，提高保障房的利用效率</div>
          <div class="desc-box"><span style="color: #0a87f8">数据分析支持：</span>利用数据分析优化管理，提升政策执行的精准度</div>
        </div>
        <div class="item4 item">
          <div class="tit">
            <div style="display: flex; align-items: center">
              <img src="/public/images/banner/solution/4.png" alt="" class="icon-img" />
              <span>加强合规性与风险控制</span>
            </div>
            <span class="count">04</span>
          </div>
          <div class="desc-box"><span style="color: #0a87f8">合规性管理：</span>确保各项管理活动符合法律规定，防范政策执行风险</div>
          <div class="desc-box"><span style="color: #0a87f8">风险控制：</span>通过系统监控异常情况，及时采取措施，降低管理风险</div>
        </div>
        <div class="item5 item">
          <div class="tit">
            <div style="display: flex; align-items: center">
              <img src="/public/images/banner/solution/5.png" alt="" class="icon-img" />
              <span>资金安全保障</span>
            </div>
            <span class="count">05</span>
          </div>
          <div class="desc-box"><span style="color: #0a87f8">在线支付与资金监管：</span>确保资金安全流转，透明记录资金去向，提升资金使用效率</div>
          <div class="desc-box"><span style="color: #0a87f8">资金流动透明：</span>实时监控资金流动，确保资金使用合理合规</div>
        </div>
        <div class="item6 item">
          <div class="tit">
            <div style="display: flex; align-items: center">
              <img src="/public/images/banner/solution/6.png" alt="" class="icon-img" />
              <span>数据安全保障</span>
            </div>
            <span class="count">06</span>
          </div>
          <div class="desc-box"><span style="color: #0a87f8">数据加密与备份：</span>通过加密技术防止数据泄露，定期备份确保数据安全</div>
          <div class="desc-box"><span style="color: #0a87f8">权限管理与审查：</span>严格控制数据访问权限，防止数据滥用，保护住户隐私</div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.ym1000 {
}
.direction-box {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
@keyframes item-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.item {
  position: absolute;
  width: 580px;
  /* min-height: 302px; */
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 26px;
}
.tit {
  font-weight: 500;
  font-size: 28px;
  color: #111111;
  line-height: 40px;
  width: 524px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.desc-box {
  margin-left: 58px;
  margin-top: 10px;
  width: 466px;
  /* height: 82px; */
  background: #f7faff;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 18px;
}
.count {
  color: #0a87f8;
  font-weight: 600;
  font-size: 36px;
}
.icon-img {
  width: 60px;
  height: 60px;
}
.icon {
  width: 66px;
  height: 62px;
}
.item1 {
  left: 0;
  top: 0;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.item2 {
  right: 0;
  top: 100px;
  animation: item-animation 0.9s ease-out 0.5s 1 normal forwards;
}
.item3 {
  left: 0;
  top: 480px;
  animation: item-animation 1.3s ease-out 0.5s 1 normal forwards;
}
.item4 {
  right: 0;
  top: 630px;
  animation: item-animation 1.7s ease-out 0.5s 1 normal forwards;
}
.item5 {
  left: 0;
  top: 960px;
  animation: item-animation 2.1s ease-out 0.5s 1 normal forwards;
}
.item6 {
  right: 0;
  top: 1040px;
  animation: item-animation 2.5s ease-out 0.5s 1 normal forwards;
}
.icon {
  position: absolute;
}
.icon1 {
  right: 520px;
  top: 30px;
  animation: item-animation 0.7s ease-out 0.5s 1 normal forwards;
}
.icon2 {
  left: 520px;
  top: 410px;
  animation: item-animation 1.1s ease-out 0.5s 1 normal forwards;
}
.icon3 {
  right: 520px;
  top: 560px;
  animation: item-animation 1.5s ease-out 0.5s 1 normal forwards;
}
.icon4 {
  left: 520px;
  top: 890px;
  animation: item-animation 1.9s ease-out 0.5s 1 normal forwards;
}
.icon5 {
  right: 520px;
  top: 970px;
  animation: item-animation 2.3s ease-out 0.5s 1 normal forwards;
}
</style>
